<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线编辑</title>
    <style>
        #titleField {
            margin: 5px;
        }
        
        #newTitleField {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="other"></div>
    <script>
        function EditInPlaceField(id, parent, value) {
            this.id = id;
            this.parent = parent;
            this.value = value || 'default value';
            this.createElement();
            this.bindEvents();
            this.doSave();
        }
        EditInPlaceField.prototype.createElement = function() {
            // 1. 创建Div
            // 2. 挂载 this.value createTextNode
            // 3. 挂载到 parent
            this.containerElement = document.createElement('div');
            this.containerElement.id = this.id;

            this.staticElement = document.createElement('span');
            this.staticElement.appendChild(
                document.createTextNode(this.value)
            )
            this.containerElement.appendChild(this.staticElement);

            this.fieldElement = document.createElement('input');
            this.fieldElement.value = this.value;
            this.fieldElement.style.display = 'none';
            this.containerElement.appendChild(this.fieldElement);

            this.saveButton = document.createElement('input');
            this.saveButton.type = 'button';
            this.saveButton.value = 'Save';
            this.saveButton.style.display = 'none';
            this.containerElement.appendChild(this.saveButton);

            this.cancelButton = document.createElement('input');
            this.cancelButton.type = 'button';
            this.cancelButton.value = 'Cancel';
            this.cancelButton.style.display = 'none';
            this.containerElement.appendChild(this.cancelButton);

            this.parent.appendChild(this.containerElement)
        }
        EditInPlaceField.prototype.switchToEditState = function() {
            this.staticElement.style.display = 'none';
            this.saveButton.style.display = 'inline';
            this.cancelButton.style.display = 'inline';
            this.fieldElement.style.display = 'inline';
            this.fieldElement.focus();
        }
        EditInPlaceField.prototype.switchToNormalState = function() {
            this.staticElement.style.display = 'inline';
            this.fieldElement.style.display = 'none';
            this.saveButton.style.display = 'none';
            this.cancelButton.style.display = 'none';
        }
        EditInPlaceField.prototype.doSave = function() {
            let newVal = this.fieldElement.value;
            this.staticElement.innerText = newVal;
            this.value = newVal;
            this.switchToNormalState();
        }
        EditInPlaceField.prototype.bindEvents = function() {
            this.staticElement.addEventListener('click',
                this.switchToEditState.bind(this));
            this.cancelButton.addEventListener('click',
                this.switchToNormalState.bind(this));
            this.saveButton.addEventListener('click',
                this.doSave.bind(this));
        }

        var titleEditor = new EditInPlaceField('titleField',
            document.body, '华为可为');
        var titleEditor = new EditInPlaceField('newTitleField',
            document.getElementById('other'), '滴滴可为');
    </script>
</body>

</html>